<template>
  <div class="main_box" style="padding-right: 10px">
    <el-card class="header-card">
      <div slot="header">
        <div class="header">
          <i @click="handleReturnList" class="el-icon-arrow-left"></i>
          <div class="separater">|</div>
          <div class="title">{{ equipName }}</div>
        </div>
      </div>

      <el-form label-width="200px" v-if="userInfo">
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名:">
              <span>{{ userInfo.name || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="年龄:">
              <span>{{ userInfo.age || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="性别:">
              <span>{{ userInfo.sex || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话:">
              <span>{{ userInfo.phone || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="当前定位地址:">
              <span>{{ userInfo.currentInfo ? (userInfo.currentInfo.address ? userInfo.currentInfo.address : '暂无地址信息') : '暂无地址信息' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" v-if="userInfo.oneName && userInfo.onePhone">
            <el-form-item label="第一紧急联系人:">
              <span>{{ userInfo.oneName }} - {{ userInfo.onePhone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="userInfo.twoName && userInfo.twoPhone">
            <el-form-item label="第二紧急联系人:">
              <span>{{ userInfo.twoName }} - {{ userInfo.twoPhone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="userInfo.threeName && userInfo.threePhone">
            <el-form-item label="第三紧急联系人:">
              <span>{{ userInfo.threeName }} - {{ userInfo.threePhone }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="header-card">
      <el-row style="margin-bottom: 10px">
        <div style="width: 100%; display: flex; justify-content: flex-end">
          <el-date-picker v-model="date" type="datetimerange" start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" end-placeholder="结束日期" @change="handleGetFootprintTrack" :default-time="['00:00:00']">
          </el-date-picker>
        </div>
      </el-row>
      <div class="map">
        <baidu-map class="bm-view" :center="center" :zoom="15" :scroll-wheel-zoom="true">
          <bm-panorama />
          <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" />
          <bm-polyline :path="path" strokeStyle="dashed" stroke-color="#49b07a" :stroke-opacity="0.5" :stroke-weight="2" :editing="false" />
          <bm-marker :icon="startMarkIcon" :position="startMark"></bm-marker>
          <bm-marker v-if="path.length > 1" :icon="endMarkIcon" :position="endMark"></bm-marker>
        </baidu-map>
      </div>
    </el-card>
  </div>
</template>

<script>
import start from '@/assets/img/map/start.png';
import end from '@/assets/img/map/end.png';
import WatchApi from '@/api/equip/watch';
import Equip from '@/api/equip';
export default {
  name: 'WatchManagement',
  data() {
    return {
      path: [],
      date: [],
      center: { lng: 116.270313, lat: 39.97534 },
      startMarkIcon: {
        url: start,
        size: { width: 52, height: 38 },
        opts: { anchor: { width: 19, height: 38 } },
      },
      endMarkIcon: {
        url: end,
        size: { width: 52, height: 38 },
        opts: { anchor: { width: 19, height: 38 } },
      },
      startMark: {},
      endMark: {},
      equipName: this.$route.query.hasOwnProperty('equipName') ? this.$route.query.equipName : '',
      equipId: '',
      userInfo: undefined,
    };
  },
  mounted() {
    // 获取现在的时间到昨天现在这个时候的时间组成初始时间条件搜寻运动轨迹
    const nowTime = new Date();
    const yesterday = new Date(nowTime.getTime() - 24 * 60 * 60 * 1000);
    this.date = [this.$Utils.formatDateString(nowTime), this.$Utils.formatDateString(yesterday)];
  },
  created() {
    if (!this.equipId) {
      this.equipId = this.$route.query.equipId;
      this.handleGetUserDetails();
      this.handleGetFootprintTrack();
      this.equipName = this.$route.query.equipName;
    }
  },
  activated() {
    if (!this.$route.query.equipId) return;
    if (this.equipId !== this.$route.query.equipId) {
      this.equipId = this.$route.query.equipId;
      this.handleGetUserDetails();
      this.handleGetFootprintTrack();
    }
    this.equipName = this.$route.query.equipName;
  },
  methods: {
    /**
     * 获取使用人
     */
    handleGetUserDetails() {
      WatchApi.getLocaleActualUserInfo({ equipId: this.equipId }).then((res) => {
        this.userInfo = { ...res.data, sex: res.data.sex ? (res.data.sex === 1 ? '男' : '女') : '' };
      });
    },

    /**
     * 获取轨迹
     */
    handleGetFootprintTrack() {
      const beginDate = this.date[0];
      const endDate = this.date[1];
      Equip.ListLatLon({ equipId: this.equipId, beginDate, endDate }).then((res) => {
        if (res.data.length > 0) {
          this.startMark = { lng: res.data[0].longitude, lat: res.data[0].latitude };
          this.endMark = { lng: res.data[res.data.length - 1].longitude, lat: res.data[res.data.length - 1].latitude };
          this.center = { lng: res.data[0].longitude, lat: res.data[0].latitude };
          this.path = res.data.map((v) => {
            return { lng: v.longitude, lat: v.latitude };
          });
        } else {
          this.$Utils.notifyWarn(`${this.date[0]} - ${this.date[1]}下没有查询到运动轨迹`);
        }
      });
    },

    /**
     * 返回列表
     */
    handleReturnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.back()
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/views/detailType.scss';
.map {
  width: 100%;
  height: 600px;
  .bm-view {
    z-index: 1;
    width: 100%;
    height: 100%;
  }
}
</style>
